<template>
  <el-tabs type="border-card">
    <el-tab-pane label="门诊发药">
      <el-form :inline="true" :model="sickref" class="demo-form-inline f1">
        <el-form-item label="患者病历号：">
          <el-input v-model="sickref.id" placeholder="请输入病历号" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="select()">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="sicklist.slice((currentpage - 1) * pagesize, currentpage * pagesize)" :border="false" style="width: 100%">
        <el-table-column type="expand">
          <template #default="props">
            <div m="4">
              <p m="t-0 b-2">性别: {{ props.row.sex }}</p>
              <p m="t-0 b-2">联系方式: {{ props.row.phone }}</p>
              <p m="t-0 b-2">药品总价: {{comp(props.row)}}</p>
              <h3>所需药品</h3>
              <el-table :data="props.row.sickDrugs" :border="true">
                <el-table-column label="药品编号" prop="drug.number" />
                <el-table-column label="药品名" prop="drug.name" />
                <el-table-column label="药品价格" prop="drug.price" />
                <el-table-column label="药品数量" prop="count" />
                <el-table-column label="药品状态">
                  <template v-slot="scope">
                    <el-tag v-show="show2(scope.row.state)" class="ml-2" type="success">已发放</el-tag>
                    <el-tag v-show="!show2(scope.row.state)" class="ml-2" type="warning">未发放</el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="患者病历号" prop="id" />
        <el-table-column label="患者名" prop="name" />
        <el-table-column label="是否缴费"><template v-slot="scope">
            <el-tag v-show="show(scope.row.pay)" class="ml-2" type="success">已缴费</el-tag>
            <el-tag v-show="!show(scope.row.pay)" class="ml-2" type="danger">未缴费</el-tag>
          </template></el-table-column>
        <el-table-column label="操作" width="120">
          <template v-slot="scope">
            <el-button @click="send(scope.row.id)" :disabled="!show3(scope.row)" size="small" type="success">发药</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="fy" layout="prev, pager, next" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :page-size="pagesize" :total="sicklist.length">
      </el-pagination>
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import axios from 'axios';
import { computed, ref } from 'vue';
import { Drug } from './Yaopin.vue';
interface Sick {
  id?: string
  name?: string
  sex?: string
  phone?: string
  pay?: string
  sickDrugs?: [{
    id?: number
    sid?: string
    dnum?: string
    state?: string
    count?: number
    drug?: Drug
  }]
}
const pagesize = ref(5)
const currentpage = ref(1)
const handleSizeChange = (size) => {

  //一页显示多少条

  pagesize.value = size;

}
const handleCurrentChange = (page) => {

  //页码更改方法

  currentpage.value = page;

}
const sickref = ref<Sick>({})
const sicklist = ref<Sick[]>([])
const sum=ref<number>();

const comp=computed(()=>(yp:Sick)=>{
  sum.value=0
  for( let i of yp.sickDrugs!){
        sum.value+=i.count!*i.drug!.price!
      }
  return sum.value.toFixed(2)
})
const show=(pay)=>{
  if (pay == '1')
  return true
  return false
}
const show3 = (row) => {
  if (row.pay == '1')
    {
      for( var i of row.sickDrugs){
        if(i.state=='0')
          return true
      }
    }
    return false
}
const show2 = (state) => {
  if (state == '1')
    return true
  return false
}
const select = async () => {
  await axios.post("/api/sick/select", sickref.value, {
    headers: {
      'Authorization': sessionStorage.getItem('authtoken')!
    }
  }).then(res => {
    sicklist.value = res.data.result
  })
}
const send = async (sid) => {
  await axios.post("/api/sickdrug/send", {
    id: sid
  }, {
    headers: {
      'Authorization': sessionStorage.getItem('authtoken')!
    }
  }).then(res => {
    if (res.data.msgId === "A006") {
      alert('药品已发放')
      select()
    }
    else {
      alert('药品发放失败')
    }
  })
}
</script>